<template>
	<view>
		<!-- 分段器开始 -->
		<view>
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"
				:activeColor="activeColor"></uni-segmented-control>
			<view class="content">
				<view v-show="current === 0">
					<!--选项卡1的内容开始 -->
					<view v-if="this.assetList != '' && this.assetList != null">
						<asset-list :list="assetList"></asset-list>
						<view class="end">-- END --</view>
					</view>
					<view v-else>
						<view class="whole">
							<image class="image" src="/static/image/zanwushuju@2x.png" mode="aspectFit"></image>
							<text>暂无数据</text>
						</view>
					</view>
					<!--选项卡1的内容结束 -->
				</view>
				<view v-show="current === 1">
					<!--选项卡1的内容开始 -->
					<view v-if="this.assetList != '' && this.assetList != null">
						<asset-list :list="assetList"></asset-list>
						<view class="end">-- END --</view>
					</view>
					<view v-else>
						<view class="whole">
							<image class="image" src="/static/image/zanwushuju@2x.png" mode="aspectFit"></image>
							<text>暂无数据</text>
						</view>
					</view>
					<!--选项卡1的内容结束 -->
				</view>
				<view v-show="current === 2">
					<!--选项卡1的内容开始 -->
					<view v-if="this.assetList != '' && this.assetList != null">
						<asset-list :list="assetList"></asset-list>
						<view class="end">-- END --</view>
					</view>
					<view v-else>
						<view class="whole">
							<image class="image" src="/static/image/zanwushuju@2x.png" mode="aspectFit"></image>
							<text>暂无数据</text>
						</view>
					</view>
					<!--选项卡1的内容结束 -->
				</view>
				<view v-show="current === 3">
					<!--选项卡1的内容开始 -->
					<view v-if="this.assetList != '' && this.assetList != null">
						<asset-list :list="assetList"></asset-list>
						<view class="end">-- END --</view>
					</view>
					<view v-else>
						<view class="whole">
							<image class="image" src="/static/image/zanwushuju@2x.png" mode="aspectFit"></image>
							<text>暂无数据</text>
						</view>
					</view>
					<!--选项卡1的内容结束 -->
				</view>
			</view>
		</view>
		<!-- 分段器结束 -->
		<!-- <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
			<asset-list :list="customers"></asset-list>
		</mescroll-body> -->

		<!-- <view v-if="assetList == null">
			<view>~ 无结果 ~</view>
		</view>
		<view v-else> -->

		<!-- </view> -->
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				options: {
					visible: false,
					rightMode: true,
					autoClose: true,
					pulldown: true
				},
				customers: [],
				// 筛选为空
				upOption: {
					noMoreSize: 0, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
					empty: {
						icon: '/static/image/zanwushuju@2x.png',
						tip: '~ 无结果 ~' // 提示
					},
				},

				page: '',

				aa: [],
				planId: '',
				assetList: [],
				checkMemberIdArr: [],
				checkMemberArr: [],
				// 分段选择器属性
				items: ['待开始', '进行中', '暂停', '已完成'],
				colors: ['#007aff', '#dd524d', '#007aff', '#4cd964'],
				current: 0,
				activeColor: '#007aff',
				clickNum: 1
			}
		},
		onShow() {
			console.log('onShow' + this.clickNum);
			this.getRecordPlans(this.clickNum)
		},
		methods: {
			// 分段器方法开始
			onClickItem(e) {
				// 让点击到的按钮跟着发生变化
				this.activeColor = this.colors[e.currentIndex]
				this.clickNum = e.currentIndex + 1
				console.log('点击的数字' + this.clickNum);
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
				const state = this.clickNum
				this.getRecordPlans(state)
			},
			// 分段器方法结束
			async getRecordPlans(state) {
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-asset/recordPlans',
						method: "get",
						data: {
							state: state,
						},
					})
				// 类型有1、2、3
				// console.log('输出获取到的结果数据:'+res.body.list);
				// console.log('获取状态：',res.body.list[1].plan.type);
				console.log(res.msg)
				// console.log('传入进来的state:'+this.clickNum);
				// if(state !==null) {
				// 	state=state
				// 	// console.log('res.body.list'+res.body.list);
				this.assetList = res.body.list
				// }
			},
			doSearch(word) {
				this.curWord = word
				this.customers = []; // 先清空列表,显示加载进度
				this.mescroll.resetUpScroll();
			},
			upCallback(page) {
				console.log("page")
				console.log(page)
				console.log("page")
				// 自写
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				// 第1种: 请求具体接口
				uni.request({
				url: 'http://pm.gxtimeloit.com:10030/api-asset/recordPlans?pageSize=' + pageSize + '&pageNumber=' +pageNum,
					success: (data) => {
						console.log('this.planType' + planType);
						// 1.13	资产盘点，根据/api-asset/recordPlans这个接口返回的数据都是当前登录人可以处理的数据，不需要在前端再判断一次。
						// if (data.success == false) {
						// 	if (data.code === "1001") { //如果请求需要登录
						// 		uni.redirectTo({
						// 			url: '/pages/user/login/index'
						// 		});
						// 	}
						// }
						if (data.data.body.list == null) {
							this.mescroll.endBySize(0, 0);
						} else {
							// console.log("22222222222", data)
							// const res = data
							if (data.data.body.list == null) {}
							// 接口返回的当前页数据列表 (数组)
							let curPageData = data.data.body.list;
							// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
							let curPageLen = curPageData.length;
							// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
							let totalPage = data.data.body.list.totalPage;
							// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
							let totalSize = data.data.body.list.totalSize;
							// 接口返回的是否有下一页 (true/false)
							let hasNext = data.xxx;
							// console.log(data.data.body.settlement.data)
							// console.log(data)
							// 请求成功,隐藏加载状态
							this.mescroll.endSuccess()
							if (page.num == 1) this.customers = []; //如果是第一页需手动制空列表
							// this.meters = this.meters.concat(data.data.body.settlement.data); //追加新数据
							this.customers = this.customers.concat(curPageData);
							this.mescroll.endByPage(curPageLen, totalPage); //隐藏下拉刷新和上拉加载的状态
						}
					},
					fail: () => {
						uni.showToast({
							title: "请求接口失败"
						})
					},
					complete: () => {
						// 请求失败,隐藏加载状态
						this.mescroll.endErr()
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	// 分段器开始

	// 分段器结束
	.housename {
		width: 100%;
		height: 210rpx;
		margin-top: 20rpx;
		display: flex;
	}

	.left1 {
		width: 2%;
		height: 210rpx;
		background-color: #007AFF;
	}

	.left2 {
		width: 2%;
		height: 210rpx;
		background-color: #FF615D;
	}

	.left3 {
		width: 2%;
		height: 210rpx;
		background-color: #f4ea2a;
	}

	.left4 {
		width: 2%;
		height: 210rpx;
		background-color: #1afa29;
	}

	.right {
		padding-left: 20rpx;
		width: 99%;
		background-color: #FFFFFF;
		height: 210rpx;
	}

	.house {
		// border: 1rpx solid;
		display: flex;
		height: 60rpx;
		line-height: 60rpx;
		border-bottom: 1px solid #e8e8e8;
	}


	.date {
		color: #000000;
		font-size: 26rpx;
		margin-left: 30%;
		right: 2%;
	}

	.details {
		height: 119rpx;
	}

	.housedetails {
		margin-top: 35rpx;
		height: 30rpx;
		// font-size:1rpx;
		display: flex;
		// border: 1rpx solid;
	}

	.text {
		font-size: 26rpx;
		color: #959595;
		height: 30rpx;
	}

	.value {
		// border: 1rpx solid;
		padding-left: 2%;
		height: 30rpx;
		width: 79%;
		font-size: 24rpx;
		overflow: hidden;
		color: #959595;
	}

	.whole {
		text-align: center;
		font-size: 60rpx;
		color: #959595;

		.image {
			margin: 320rpx 0 50rpx 0;
			width: 100%;
			height: 350rpx;
		}
	}

	.end {
		color: #919499;
		width: 100%;
		margin: 35rpx auto;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
